<template>
  <div>
    <el-form label-position="right" label-width="80px" :model="user">
      <el-form-item label="头像">
        <el-upload class="avatar-uploader" action="http://www.jiatingyigou.com:3007/upload/img" :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <img v-if="user.avatar" :src="user.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="user.nickName"></el-input>
      </el-form-item>
      <el-form-item label="介绍">
        <el-input v-model="user.introdu"></el-input>
      </el-form-item>
    </el-form>
    <div style="position: relative; width: 100%;margin-left:150px">
      <el-button @click="updateInfo" type="primary">确认更改</el-button>
    </div>

  </div>
</template>

<script>
  import {Button, Select} from 'element-ui'
  import {ToastPlugin} from 'vux'
  import {getInfo, updateUserInfo, uploadImg} from "@/api/user"
  import {getToken} from "@/utils/auth"
  import Vue from "vue"

  Vue.use(ToastPlugin)
  export default {
    data() {
      return {
        iconType1: "",
        iconType2: "",
        user: {},
        type: "1",
        msg: 'Hello World!',
        results: [],
        autoFixed: false,
        validate1: function (value) {
          value = value.trim()

          if (value == "") {
            this.iconType1 = "error"
          } else {
            this.iconType1 = "success"
          }

          return {
            valid: value !== "",
            msg: '姓名不能为空'
          }
        },
        validate2: function (value) {
          value = value.trim()
          if (value == "") {
            this.iconType2 = "error"
          } else {
            this.iconType2 = "success"
          }
          return {
            valid: value !== "",
            msg: '个人介绍不能为空'
          }
        },
        style: '',
        disabledValue: 'hello',
        debounceValue: '',
        maxValue: '',
        maskValue: '13545678910',
        maskValue2: ''
      }
    },
    created() {
      let token = getToken()
      getInfo(token).then((res) => {
        if (res.status == 1) {
          this.user = res.user[0]
        }
      })

    },
    methods: {
      changeTarbleBar(index) {

        this.tableBarItem = this.tableBarItem.map((item) => {
          item.selected = false
          return item
        })

        this.tableBarItem[index].selected = true
      },
      onCancel: function () {
        this.searchContent = ""
      },
      onSubmit: function () {
      },
      resultClick: function () {

      },
      onImgError: function () {

      },
      showPaper() {
        this.paperShow = true
        this.videoShow = false
      },
      showVideo() {
        this.paperShow = false
        this.videoShow = true
      },
      updateInfo() {
        let user = this.user
        updateUserInfo(user).then((res) => {
          if (res.status == 1) {
            this.$vux.toast.text('信息更新成功', 'top')
            this.$router.push({path: "/personal"})
          }
        })
      },
      uploadAvatar() {
        this.$refs.upload.click()
      },
      fileChange(obj) {
        uploadImg(formData).then((res) => {
          console.log(res)
          if (res.status == 1) {

          }
        })
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.user.avatar = "http://" + res.data.url;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }

</script>

<style>
  .split {
    position: relative;
    width: 100%;
    height: 15px;
    background: #f3f5f7;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 90px;
    height: 90px;
    display: block;
  }
</style>
